<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TensorSpace - LeNet Demo</title>
        <meta name="author" content="syt123450 / https://github.com/syt123450">
        <meta name="author" content="zchholmes / https://github.com/zchholmes">
        <style>

            html, body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

            #container {
                width: calc( 100% - 300px );
                height: 100%;
                background-color: #000;
            }

            #controlPanel {
                width: 300px;
                height: 100%;
                position: absolute;
                background-color: #04242E;
                border-left: 1px solid #6797AE;
                box-sizing: border-box;
                right: 0;
            }

            #clear {
                position: absolute;
                top: 300px;
                left: 38px;
                width: 224px;
                line-height: 50px;
                height: 50px;
                font-size: 25px;
                text-align: center;
                background-color: #000;
                border: 1px solid #6797AE;
                box-sizing: border-box;
                color: #6797AE;
                cursor: pointer;
            }

            .wrapper {
                position: absolute;
                width: 224px;
                height: 224px;
                left: 38px;
                top: 50px;
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                user-select: none;
                z-index: 100;
                background-color: #000;
                border: 1px solid #6797AE;
                box-sizing: border-box;
            }

            .signature-pad {
                position: absolute;
                left: 0;
                top: 0;
                border: 1px solid #000;
            }

        </style>
    </head>
    <body>

        <div id="controlPanel">
            <div class="wrapper">
                <canvas id="signature-pad" class="signature-pad" width=224 height=224></canvas>
            </div>
            <div id="clear">clear</div>
        </div>

        <div id="container"></div>

        <script src="../lib/jquery.min.js"></script>
        <script src="../lib/three.min.js"></script>
        <script src="../lib/stats.min.js"></script>
        <script src="../lib/tween.min.js"></script>
        <script src="../lib/TrackballControls.js"></script>
        <script src="../lib/tf.min.js"></script>
        <script src="../lib/signature_pad.min.js"></script>
        <script src="../../dist/tensorspace.js"></script>

        <script>

            let signaturePad = new SignaturePad( document.getElementById( 'signature-pad' ), {

                minWidth: 10,
                backgroundColor: 'rgba(255, 255, 255, 0)',
                penColor: 'rgb(103, 151, 174)',
                onEnd: getImage

            } );

            function getImage() {

                let canvas = document.getElementById( "signature-pad" );
                let context = canvas.getContext( '2d' );
                let imgData = context.getImageData( 0, 0, canvas.width, canvas.height );

                let signatureData = [];

                for ( let i = 0; i < 224; i += 8 ) {

                    for ( let j = 3; j < 896; j += 32 ) {

                        signatureData.push( imgData.data[ 896 * i + j ] / 255 );

                    }

                }

                model.predict( signatureData );

            }

            $( function() {

                $( "#clear" ).click( function() {

                    signaturePad.clear();
                    model.clear();

                } );

            } );

        </script>

        <script>

            let modelContainer = document.getElementById( "container" );

            let model = new TSP.models.Sequential( modelContainer, {

                animeTime: 200,
                stats: true

            } );

            model.add( new TSP.layers.GreyscaleInput() );

            model.add( new TSP.layers.Padding2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Dense() );

            model.add( new TSP.layers.Dense() );

            model.add( new TSP.layers.Output1d( {

                outputs: [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ]

            } ) );

            model.load( {

                type: "tfjs",
                url: './lenetModel/mnist.json'

            } );

            model.init();

        </script>
    </body>
</html>
